iT邦幫忙

2023 iThome 鐵人賽

DAY 19
0
Modern Web

Angular + Quill: 文字編輯的強化之路系列 第 19

Day 19:讀 Quill Editor API 技術文件 - Modules

  • 分享至 

  • xImage
  •  

明天北北基桃沒有放颱風假,大家上班注意安全。
今天開始進到 Module 的章節。

Module 允許 Quill 的操作行為與功能實現客製化。有幾個官方支援的模組可供選擇,其中一些還有額外的配置選項和API。目前官網列出支援的模組有:ToolbarKeyboardHistoryClipboard,以及Syntax Highlighter。各章節也都會提到如何使用以及有哪些 API 可供操作。

要啟用模組只需要把要使用的模組加到 Quill 的配置中即可:

const quill = new Quill('#editor', { 
	modules: { 
		'history': { // Enable with custom configurations 
			'delay': 2500, 
			'userOnly': true 
		}, 
		'syntax': true // Enable with default configuration 
	} 
});

Clipboard,Keyboard 和 History 模組是 Quill 所必需的,不需要明確設定就預設在裡面了,但也可以像其他模組一樣進行設定。

繼承 (Extending)

模組也可以繼承和重新註冊,替換掉原本的模組。甚至原本預設內建的必要模組也能重新註冊來做替換。例如繼承 clipboard 模組並自訂一些功能:

const Clipboard = Quill.import('modules/clipboard'); 
const Delta = Quill.import('delta'); 
class PlainClipboard extends Clipboard { 
	convert(html = null) { 
		if (typeof html === 'string') { 
			this.container.innerHTML = html; 
		} 
		let text = this.container.innerText; 
		this.container.innerHTML = ''; 
		return new Delta().insert(text); 
	} 
} 

Quill.register('modules/clipboard', PlainClipboard, true); 

// Will be created with instance of PlainClipboard 
const quill = new Quill('#editor');

上面這個範例只是為了解釋 module 提供的可能性。單純用既有模組提供的 API 或 config 通常會更容易些。在這個 clipboard 模組擴充的操作範例中,用現有的 addMatcher 其實就能夠滿足大部分的情境需求了。

小結

今天介紹了 Quill 的 module,強調其客製化,以及可繼承並擴展。Quill 內建了許多豐富的 module,讓我們可以按照需求選擇和配置。繼承的部分則允許開發者擴充新功能並替換原有的模組,同時也提到單純使用既有的 API 或設定也許就能滿足大部分的需求。在這個章節,我們了解如何利用 module 來啟用 Quill 的功能,並依照實際需求進行繼承及擴充自訂功能,之後來介紹並研究一下第三方的開源套件要如何使用,以及他們是如何實現自訂功能的。應該能有不少收穫。

雜記

最近上下班的運氣都還不錯,儘管有下雨,但出門跟下班回家的這段時間都是無雨的,今天又去了整復保養一下,然後再去看中醫,弄得時間有點晚。這次的颱風感覺也是來者不善,放颱風假就乖乖待在家,看點書追個劇也好。我明天要繼續去上班了 QQ

Reference


上一篇
Day 18:讀 Quill Editor API 技術文件 - Extension
下一篇
Day 20:讀 Quill Editor API 技術文件 - Toolbar Module
系列文
Angular + Quill: 文字編輯的強化之路30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言